{% load static %}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ category.name }} 分类</title>
    <style>
        /* 保持主站背景不变 */
        body {
            background-image: url("{% static 'images/背景x.jpg' %}");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        /* 增强标题效果 */
        h1 {
            font-size: 4rem;
            text-align: center;
            margin: 3rem 0;
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            padding-bottom: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
            border-radius: 2px;
        }

        /* 增强主容器 */
        .carousel-container {
            max-width: 1200px;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 30px;
            box-shadow: 0 20px 40px rgba(255,107,107,0.1);
            margin: 2rem auto;
        }

        /* 创新导航系统 */
        .nav-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .nav-dots {
            display: flex;
            gap: 1rem;
        }

        .nav-dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #ffe0e0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-dot.active {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            transform: scale(1.3);
        }

        /* 紧凑型卡片设计 */
        .image-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            padding: 2rem;
            background: white;
            border-radius: 25px;
            box-shadow: 0 10px 30px rgba(255,107,107,0.1);
        }

        .image-container {
            height: 400px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .image-container:hover img {
            transform: scale(1.05);
        }

        /* 信息面板优化 */
        .content-wrapper {
            display: flex;
            flex-direction: column;
            height: 400px;
        }

        .info-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .tab-button {
            padding: 0.8rem 1.5rem;
            border-radius: 20px;
            background: #ffeaea;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .tab-button.active {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
        }

        .tab-content {
            flex: 1;
            overflow-y: auto;
            padding-right: 1rem;
        }

        /* 紧凑型评分系统 */
        .rating-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
        }

        .rating-item {
            background: #fff5f5;
            padding: 1.2rem;
            border-radius: 15px;
        }

        /* 智能表单布局 */
        .rating-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .image-item {
                grid-template-columns: 1fr;
            }
            
            .image-container {
                height: 300px;
            }
            
            .content-wrapper {
                height: auto;
            }
            
            .rating-form {
                grid-template-columns: 1fr;
            }
        }

        /* 渐变评分面板 */
        .rating-panel {
            background: linear-gradient(135deg, #fff5f5 0%, #ffecec 100%);
            border-radius: 20px;
            padding: 2rem;
            margin-top: 2rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(255,107,107,0.1);
        }

        .rating-panel::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -30px;
            width: 120px;
            height: 120px;
            background: rgba(255,107,107,0.08);
            border-radius: 30px;
            transform: rotate(45deg);
        }

        /* 星级评分系统 */
        .star-rating {
            display: flex;
            gap: 8px;
            margin: 1rem 0;
        }

        .star {
            font-size: 2rem;
            color: #ffd3d3;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }

        .star:hover {
            transform: scale(1.2);
        }

        .star.active {
            color: #ff6b6b;
            text-shadow: 0 2px 8px rgba(255,107,107,0.3);
        }

        /* 星级容器优化 */
        .star-container {
            margin: 1rem 0;
            padding: 15px 0;
            border-bottom: 2px solid #ffe0e0;
        }

        /* 优化评论框容器 */
        .comment-box {
            width: calc(100% - 40px);
            margin: 20px auto;
            padding: 25px;
            border: 3px solid #ffb3b3;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 
                0 0 0 4px rgba(255,107,107,0.1),
                0 8px 20px rgba(255,107,107,0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        /* 添加装饰性元素 */
        .comment-box::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid rgba(255,107,107,0.15);
            border-radius: 25px;
            z-index: -1;
        }

        /* 调整输入区域 */
        .comment-box textarea {
            width: 100%;
            min-height: 150px;
            font-size: 1.1rem;
            line-height: 1.6;
            padding: 15px;
            border: 2px solid #ffe0e0;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        /* 聚焦状态优化 */
        .comment-box:focus-within {
            transform: translateY(-3px);
            box-shadow: 
                0 0 0 4px rgba(255,107,107,0.2),
                0 12px 30px rgba(255,107,107,0.15);
        }

        /* 字数统计样式 */
        .char-counter {
            text-align: right;
            margin-top: 15px;
            font-size: 0.9rem;
            color: #666;
        }

        /* 美食主题按钮 */
        .submit-btn {
            position: relative;
            width: 160px;
            padding: 10px 25px;
            font-size: 1.1rem;
            background: linear-gradient(135deg, #ffb3c6, #ff8eab);
            border: none;
            border-radius: 20px;
            color: white;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .submit-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z'/%3E%3C/svg%3E") repeat;
            opacity: 0.15;
            transform: translate(-50%, -50%) rotate(-15deg);
        }

        .submit-btn span {
            position: relative;
            z-index: 1;
            letter-spacing: 1px;
        }

        .submit-btn:hover {
            transform: scale(1.05) rotate(2deg);
            box-shadow: 0 5px 15px rgba(255,142,171,0.4);
        }

        .submit-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, 
                transparent 25%, 
                rgba(255,255,255,0.1) 25%, 
                rgba(255,255,255,0.1) 50%, 
                transparent 50%, 
                transparent 75%, 
                rgba(255,255,255,0.1) 75%
            );
            background-size: 4px 4px;
            animation: btnShine 3s infinite linear;
        }

        @keyframes btnShine {
            from { transform: translate(-25%, -25%) rotate(0deg); }
            to { transform: translate(-25%, -25%) rotate(360deg); }
        }

        /* 装饰性元素 */
        .rating-decoration {
            position: absolute;
            bottom: -20px;
            left: -20px;
            width: 80px;
            height: 80px;
            opacity: 0.1;
            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23ff6b6b' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
        }

        /* 添加模拟数据样式 */
        .demo-rating {
            position: relative;
            background: #fff8f8;
            border-left: 4px solid #ffb3c6;
        }
        
        .demo-rating::after {
            content: "示例评价";
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 0.8rem;
            color: #ff6b6b;
            padding: 2px 8px;
            border-radius: 12px;
            background: rgba(255,107,107,0.1);
        }
    </style>
</head>
<body>
    <h1>{{ category.name }} 分类</h1>
    
    <div class="carousel-container">
        <div class="nav-wrapper">
            <div class="nav-dots">
                {% for image in images %}
                <div class="nav-dot {% if forloop.first %}active{% endif %}" 
                     data-index="{{ forloop.counter0 }}"></div>
                {% endfor %}
            </div>
        </div>

        <div class="slides-wrapper">
            {% for image in images %}
            <div class="image-item">
                <div class="image-container">
                    <img src="{% static image.image_path %}" alt="{{ image.name }}">
                </div>
                
                <div class="content-wrapper" data-item="{{ forloop.counter0 }}">
                    <div class="info-tabs">
                        <button class="tab-button active" data-tab="info">菜品信息</button>
                        <button class="tab-button" data-tab="ratings">评分评论</button>
                    </div>

                    <div class="tab-content" data-tab="info">
                        <h3>{{ image.name }}</h3>
                        <div class="rating-grid">
                            <div class="rating-item">
                                <h4>总评分</h4>
                                <p class="score">{{ image.total_rating|default:"-" }}/5</p>
                            </div>
                            <div class="rating-item">
                                <h4>您的评分</h4>
                                <p>{{ image.user_rating|default:"未评分" }}</p>
                            </div>
                        </div>
                        
                        <div class="content-section">
                            {{ image.description|default:"暂无描述" }}
                        </div>
                    </div>

                    <div class="tab-content" data-tab="ratings" style="display:none;">
                        <div class="rating-list">
                            <!-- 真实数据 -->
                            {% for rating in image.ratings.all %}
                            <div class="rating-item">
                                <div class="user-meta">
                                    <strong>{{ rating.user.username }}</strong>
                                    <span>{{ rating.created_at|date:"Y-m-d" }}</span>
                                </div>
                                <div class="rating-detail">
                                    评分：{{ rating.rating_id }}
                                    {% if rating.comment %}
                                    <p>{{ rating.comment }}</p>
                                    {% endif %}
                                </div>
                            </div>
                            {% empty %}
                            <!-- 根据菜品类型显示不同评价 -->
                            <div class="rating-list">
                                {% cycle 0 1 2 as category_num silent %}
                                
                                <!-- 中式菜品 -->
                                {% if category_num == 0 %}
                                <div class="rating-item demo-rating">
                                    <div class="user-meta">
                                        <strong>传统美食家</strong>
                                        <span>2023-08-18</span>
                                    </div>
                                    <div class="rating-detail">
                                        评分：4.8
                                        <p>锅气十足！火候掌握堪称教科书级别，建议搭配的酱料可以再丰富些</p>
                                    </div>
                                </div>
                                <div class="rating-item demo-rating">
                                    <div class="user-meta">
                                        <strong>年轻食客</strong>
                                        <span>2023-08-17</span>
                                    </div>
                                    <div class="rating-detail">
                                        评分：4.5
                                        <p>创新搭配令人惊喜，如果能降低辣度选项就更适合大众口味了</p>
                                    </div>
                                </div>
                                
                                <!-- 西式菜品 -->
                                {% elif category_num == 1 %}
                                <div class="rating-item demo-rating">
                                    <div class="user-meta">
                                        <strong>西餐主厨</strong>
                                        <span>2023-08-18</span>
                                    </div>
                                    <div class="rating-detail">
                                        评分：4.7
                                        <p>酱汁层次丰富，建议搭配的香草可以现磨以提升香气</p>
                                    </div>
                                </div>
                                
                                <!-- 日式菜品 -->
                                {% else %}
                                <div class="rating-item demo-rating">
                                    <div class="user-meta">
                                        <strong>刺身爱好者</strong>
                                        <span>2023-08-18</span>
                                    </div>
                                    <div class="rating-detail">
                                        评分：4.9
                                        <p>食材新鲜度无可挑剔，山葵现磨这点非常专业</p>
                                    </div>
                                </div>
                                {% endif %}
                                
                                <!-- 通用评价 -->
                                <div class="rating-item demo-rating">
                                    <div class="user-meta">
                                        <strong>家庭主妇</strong>
                                        <span>2023-08-16</span>
                                    </div>
                                    <div class="rating-detail">
                                        评分：{% cycle 4.3 4.6 4.4 %}
                                        <p>{% cycle '孩子特别喜欢这个口味' '适合带便当的菜品' '操作说明很详细容易复刻' %}</p>
                                    </div>
                                </div>
                                <div class="rating-item demo-rating">
                                    <div class="user-meta">
                                        <strong>健身达人</strong>
                                        <span>2023-08-15</span>
                                    </div>
                                    <div class="rating-detail">
                                        评分：{% cycle 4.5 4.2 4.7 %}
                                        <p>{% cycle '蛋白质含量充足' '热量标注很贴心' '搭配的蔬菜种类丰富' %}</p>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <!-- 新增评分面板 -->
                        <div class="rating-panel">
                            <div class="rating-decoration"></div>
                            <h4>发表您的评价</h4>
                            <form method="POST" class="rating-form">
                                {% csrf_token %}
                                <input type="hidden" name="image_id" value="{{ image.id }}">
                                
                                <div class="star-container">
                                    <div class="star-rating">
                                        {% for i in "12345" %}
                                        <span class="star" data-value="{{ i }}">★</span>
                                        {% endfor %}
                                    </div>
                                </div>

                                <div class="comment-box">
                                    <textarea 
                                        name="comment" 
                                        placeholder="写下您的用餐体验...(140字以内)"
                                        maxlength="140"></textarea>
                                    <div class="char-counter">剩余字数：<span>140</span></div>
                                </div>

                                <button type="submit" class="submit-btn">
                                    <span>提交评价</span>
                                    <svg>...</svg>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</body>

<script>
    // 独立标签切换（每个菜品独立）
    document.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', () => {
            const parentWrapper = button.closest('.content-wrapper');
            const tabName = button.dataset.tab;
            
            // 只影响当前菜品的标签
            parentWrapper.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
            button.classList.add('active');
            
            parentWrapper.querySelectorAll('.tab-content').forEach(content => {
                content.style.display = content.dataset.tab === tabName ? 'block' : 'none';
            });
        });
    });

    // 增强星级评分逻辑
    document.querySelectorAll('.star-rating').forEach(rating => {
        rating.querySelectorAll('.star').forEach(star => {
            star.addEventListener('click', function() {
                const currentValue = parseInt(this.dataset.value);
                const currentActive = this.classList.contains('active');
                const stars = rating.querySelectorAll('.star');
                
                // 判断是否需要取消选择
                if (currentActive && this === stars[currentValue - 1]) {
                    stars.forEach(s => s.classList.remove('active'));
                } else {
                    stars.forEach((s, index) => {
                        s.classList.toggle('active', index < currentValue);
                    });
                }
            });
        });
    });

    // 动态字数统计
    document.querySelectorAll('textarea').forEach(textarea => {
        const counter = textarea.closest('.comment-box').querySelector('.char-counter span');
        textarea.addEventListener('input', () => {
            const remaining = 140 - textarea.value.length;
            counter.textContent = remaining;
            counter.style.color = remaining < 20 ? '#ff6b6b' : '#666';
        });
    });

    // 导航点交互
    document.querySelectorAll('.nav-dot').forEach(dot => {
        dot.addEventListener('click', function() {
            currentIndex = parseInt(this.dataset.index);
            updateSlide();
            // 更新导航点状态
            document.querySelectorAll('.nav-dot').forEach(d => d.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>
</html>
